<template>
  <div class="vuePDFpagination">
    <!-- <PDFtEST></PDFtEST> -->

    <header>
      <h1>PDF大文件查看器</h1>
      
      <div class="url-input">
        <!-- <input type="text" v-model="pdfUrl" placeholder="输入PDF文件URL" @keyup.enter="loadPdf">
        <button @click="loadPdf">
          <i class="fas fa-download"></i> 加载PDF
        </button> -->
      </div>
    </header>

    <pdf-controls
      :current-page="page"
      :num-pages="numPages"
      :scale="scale"
      :rotate="rotate"
      @update:current-page="page = $event"
      @update:scale="scale = $event"
      @update:rotate="rotate = $event"
      @prev-page="prevPage"
      @next-page="nextPage">
    </pdf-controls>

    <pdf-viewer
      :src="pdfSrc"
      :current-page="page"
      :scale="scale"
      :rotate="rotate"
      @loaded="onPdfLoaded"
      @error="onError"
      @progress="onProgress"
      @link-clicked="onLinkClicked">
    </pdf-viewer>

  </div>
</template>

<script>
import PdfViewer from '@/commont/plugins/pdfvuer/PdfViewer.vue'
import PdfControls from '@/commont/plugins/pdfvuer/PdfControls.vue'
export default {
  components: { PdfViewer,PdfControls },
  data() {
    return {
      // pdfUrl: 'https://tstj.etianshui.com/model/%E5%A4%A9%E6%B0%B4%E7%BB%8F%E6%B5%8E%E5%B9%B4%E9%89%B4%E2%80%942002.pdf',
      pdfUrl: '/api/model/%E5%A4%A9%E6%B0%B4%E7%BB%8F%E6%B5%8E%E5%B9%B4%E9%89%B4%E2%80%942002.pdf',
      pdfSrc: null,
      page: 1,
      numPages: 0,
      scale: 1,
      rotate: 0
    }
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    loadPdf() {
      this.pdfSrc = this.pdfUrl;
      this.page = 1;
    },
    prevPage() {
      if (this.page > 1) this.page--;
    },
    nextPage() {
      if (this.page < this.numPages) this.page++;
    },
    onPdfLoaded(pdf) {
      this.numPages = pdf.numPages;
    },
    onError(error) {
      console.error('PDF加载错误:', error);
    },
    onProgress(progress) {
      console.log('加载进度:', progress);
    },
    onLinkClicked(page) {
      this.page = page;
    }
  }
}
</script>

<style>
.vuePDFpagination {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
